<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft"> </van-nav-bar>

        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage"  show-scrollbar="false">

            <view class="tabTop">
                <img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/success_icon1129.png" alt="" style="width: 92px; height: 86px;">
            </view>
            <template>
                <view class="moneyBg">
                    <view class="text">{{paymentMsg}}</view>
                    <view class="money">支付 <span v-if="payPoints && Number(payPoints)!==0"><img src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/shangcheng/jinbi.png" alt="" style="width: 13px; height: 13px; margin-left: 10px;margin-right: 7px;"> {{ payPoints?payPoints:0 }} </span> <span v-if="payAmount && payPoints && Number(payAmount)!==0 && Number(payPoints)!==0">+</span> <span v-if="payAmount && Number(payAmount)!==0">￥{{ payAmount}}</span> </view>
                </view>

                <view class="btnArea">
                    <button style="margin: 30px 0" plain type="default" class="button" @click="lookAroundBtn">回首页</button>
                    <button style="margin: 30px 0" plain  class="checkBtn" @click="lookMyOrders">查看订单</button>
                </view>
            </template>
            <!-- 彩色的线 -->
            <view class="clearfix">
                <img
                    src="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/colorLine.png"
                    alt=""
                    style=" display:block; width: 100%; height:3px;" />
            </view>
            <!-- 页面底部内容  你可能还会喜欢 -->
            <view class="maybeYouLike">
                <view class="content_title">你可能还会喜欢</view>
                <view class="goodsListBox">
                    <view
                        class="joinGoodsList"
                        v-for="(itemL, indexL) in joinGoodsList"
                        :id="indexL"
                        :key="indexL"
                        @click="toGoodsDetail(itemL, indexL)">
                        <view class="joinGoods_img">
                            <img :src="itemL.imgurl" alt="" mode="widthFix">
                        </view>
                        <view class="joinGoods_detail pl15">{{ itemL.detail }}</view>
                        <view class="joinGoods_title pl15">{{ itemL.title }}</view>
                        <view class="joinGoods_price pl15">{{ itemL.price }}</view>
                    </view>
                </view>
            </view>
        </scroll-view>
        <van-toast id="van-toast" />
    </view>
</template>

<script>
import { SOURCE_TYPE } from '@/utils/constant'
import {getOrderPaymentStatusApi} from '@/api/order'

export default {
    data () {
        return {
            navBarTitle: '收银台',
            scrolling: false,
            paymentMsg:'', // 支付信息
            payPoints: '0', // 支付积分
            payAmount: '0', // 支付金额
            paymentStatus:undefined, // 支付状态
            joinGoodsList: [ // 热卖商品

                {
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/clothes.png',
                    detail: '水润保湿面膜 澎湃水动力',
                    title: '黄芪杞姜枣糕',
                    price: '¥169'
                },
                {
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/luying.png',
                    detail: '美味好物限时抢购送好礼',
                    title: '黄芪杞姜枣糕',
                    price: '¥169'
                },
                {
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/coffee.png',
                    detail: '美味好物限时抢购送好礼',
                    title: '黄芪杞姜枣糕',
                    price: '¥169'
                },
                {
                    imgurl: 'https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/dangao.png',
                    detail: '美味好物限时抢购送好礼',
                    title: '黄芪杞姜枣糕',
                    price: '¥169'
                }
            ],
            params: undefined, // 接受从路由传过来的参数
            productId: undefined, // 商品id 返回商品详情时需要
            orderId:undefined,
            source: SOURCE_TYPE.DEFAULT, // 支付订单来源于购物车
            payType: 'wallet', // 支付类型
            payAboutType: '', // 支付关于类型 chunjifen 
        }
    },
    onLoad (data) {
        if (data) {
            if(data.params){
                this.params=JSON.parse(decodeURIComponent(data.params)) || {}
                this.productId = this.params.productId || undefined
                this.orderId = this.params.orderId
                this.paymentMsg = this.params.paymentMsg || ''
                this.paymentStatus = this.params.paymentStatus || ''
                this.payPoints = this.params.payPoints || '0'
                this.payAmount = this.params.payAmount || '0'
                console.log(this.params,this.orderId,'订单id')
                this.source = this.params.source || SOURCE_TYPE.DEFAULT
                this.payType = this.params.payType || 'points'
                this.payAboutType = this.params.payAboutType || ''
            }else{
                console.log(data,'data')
            }

        }
    },
    onReady () {
    },
    onShow(){
        console.log(this.paymentStatus,'支付状态',this.source,'source')
        // // 支付成功后 刷新订单状态
        // if (this.payType == 'wallet'){
        //     this.getOrderPaymentStatus(this.orderId)
        // }
    },
    methods: {
        // 滑动
        scrollPage (e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {

            console.log(this.source, 'source')
            const returnMap = {
                [SOURCE_TYPE.CART]: '/pages/shoppingCart/gouwuche',
                [SOURCE_TYPE.ORDER]: '/pages/orders/myOrder',
                [SOURCE_TYPE.PROMOTION]: '/pages/activity/promotionDetail',
                [SOURCE_TYPE.DETAIL]: '/pages/shangcheng/goodsDetail',
                [SOURCE_TYPE.DEFAULT]: '/pages/orders/myOrder',
                [SOURCE_TYPE.SERVICE]: '/pages/myService/myService',
            };
            const targetSource = this.source || SOURCE_TYPE.DEFAULT;
            const targetUrl = returnMap[targetSource] || SOURCE_TYPE.DEFAULT;
            const params = {
                source: targetSource,
                isPay : this.paymentStatus =='SUCCESS',
                orderId: this.orderId,
                productId: this.productId,
                status:'paid',
                orderStatus:'0', //-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款；5：退款
                pageSourceType:'paySuccess'
            }
            const fullUrl = `${targetUrl}?params=${encodeURIComponent(JSON.stringify(params))}`;
            // 清除页面栈后跳转
            uni.reLaunch({ url: fullUrl });


            // if (this.source===SOURCE_TYPE.SERVICE) {
            //     uni.reLaunch({
            //         url: '/pages/orders/awaitUseService?params=' +
            //             encodeURIComponent(JSON.stringify(params))
            //     })
            // }else{
            //     uni.reLaunch({
            //         url: '/pages/orders/orderDetails?params=' +
            //             encodeURIComponent(JSON.stringify(params))
            //     })
            // }

        },

        // 继续逛逛
        lookAroundBtn () {
            const params = {}
            params.biaoshi = 'pay'
            // uni.navigateTo({
            //     url:'/pages/surprise/index?params=' +
            //     encodeURIComponent(JSON.stringify(params))
            // })
            wx.switchTab({ url: '/pages/surprise/index' })
        },
        // 查看订单
        lookMyOrders () {
            const params = {
                source: this.source,
                isPay : this.paymentStatus =='SUCCESS',
                orderId: this.orderId,
                productId: this.productId,
                status:'paid',
                orderStatus:this.source===SOURCE_TYPE.SERVICE ? '6' : '0', //  订单状态（-1:全部订单; 0：待发货；1：待收货；2：已收货，待评价；3：已完成；4:待付款 5: 已取消
                //  6: 待使用 7:已关闭 8. 售后中(售后退款) 9:已删除 10: 已签收)
                pageSourceType:'paySuccess'
            }
            if (this.source===SOURCE_TYPE.SERVICE) {
                uni.reLaunch({
                    url: '/pages/orders/awaitUseService?params=' +
                        encodeURIComponent(JSON.stringify(params))
                })
            }else{
                uni.reLaunch({
                    url: '/pages/orders/orderDetails?params=' +
                        encodeURIComponent(JSON.stringify(params))
                })
            }

        },
        // 查看订单支付状态
        getOrderPaymentStatus (orderId) {

            getOrderPaymentStatusApi(orderId).then(res => {
                console.log(res)
                if (res.code === 200) {
                    this.payAmount = res.data.payAmount
                    this.payPoints = res.data.payPoints
                    this.paymentMsg = res.data.message
                    this.paymentStatus = res.data.status
                }
            })
        },

    }
}
</script>

<style scoped>
.content {
    background-color: #ffffff;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:24px;
    text-align: center;
}
.title{
    font-size: 30px;
    text-align: left;
    color: #111111;
}
.moneyBg{
    margin-top: 17px;
    margin-left: 24px;
    margin-right: 24px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: calc(100% - 48px); /* 新增宽度约束 */
}
.text{
    font-size: 30px;
    text-align: center;
    color: #111111;
    line-height: 30px;
}
.money{
    display: flex;
    align-items: center;
    justify-content: center; /* 新增水平居中 */
    width: 100%; /* 新增宽度约束 */
    font-size: 14px;
    color: #111111;
    text-align: center;
    line-height: 14px;
    margin-top:20px;
}

.content_title{
    font-size:20px;
    text-align: left;
    color: #111111;
    line-height: 20px;
}
.content_select{
    margin-top: 24px;
}
.num{
    border: 1px solid #333333;
    font-size: 12px;
    text-align: center;
    color: #111111;
    line-height: 12px;
    padding: 10px 0px;
    margin-top: 24px;
    width: 96px;

}
.payItem{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 27px;
}
.payItem:last-child{
    margin-bottom: 0px;
}

.payItemLeft{
    display: flex;
    align-items: center;
}
.name{
    font-size: 13px;
    color: #111111;
    line-height: 13px;
    margin-left: 11px;
}
.walletBalance{
    font-size: 11px;
    color: #666666;
    line-height: 11px;
    margin-left: 7px;
}

.btnArea{
    padding: 50px 24px 20px 24px ;
    width: calc(100% - 48px);
    display: flex;
    z-index: 100;
    justify-content: space-between;
}

.button{
    background-color: #Ffffff;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #111111;
    height: 86rpx;
    line-height: 86rpx;
    border: 1px solid #D4D4D4 !important;
    width: 45%;
}
.checkBtn{
    background-color: #FF6203;
    border: none;
    border-radius: 38px;
    font-size:28rpx;
    text-align: center;
    color: #FFFFFF;
    height: 86rpx;
    line-height: 86rpx;
    /* padding-left: 35px;
    padding-right: 35px; */
    width: 45%;
}
button{
    border: none;
}
button[plain]{
    border:none;
}
.maybeYouLike{
    padding: 24px;
}

/* 标题 */
.content_title{
    font-size:19px;
    text-align: left;
    color: #111111;
    line-height:19px;
}
/* 商品盒子 */
.goodsListBox{
    margin-top: 24px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.joinGoods_img {
    position: relative;
}
.joinGoods_img img {
    width: 100%;
}
.joinGoodsList {
    width: 46%;
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px 0 rgb(231, 231, 231, 0.29);
    margin-right: 15px;
    background: #ffffff;
}

.joinGoodsList:nth-child(2n) {
    margin-right: 0;
}
.status_tips {
    position: absolute;
    height: 54px;
    width: 100%;
    background: rgb(240, 240, 240, 0.66);
    align-items: center;
    text-align: center;
    line-height: 54px;
    font-size: 14px;
    text-align: center;
    color: #666666;
    bottom: 5px;
}

.joinGoods_detail {

    max-width: 100%;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;

    font-size: 10px;
    line-height: 10px;
    text-align: left;
    color: #666666;
    margin-top: 14px;
    margin-left: 14px;
}

.joinGoods_title {

    max-width: 100%;
    white-space: nowrap;
    /* 防止文本换行 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */

    font-size: 14px;
    line-height: 14px;
    text-align: left;
    color: #111111;
    margin-top: 11px;
    margin-left: 14px;
}

.joinGoods_price {

    font-weight: bolder;
    line-height: 16px;
    font-size: 16px;
    text-align: left;
    color: #111111;
    margin-top: 11px;
    margin-bottom: 13px;
    margin-left: 14px;
}

::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}
::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
/* ::v-deep .van-switch{
    height: 18px !important;
    width: 36px !important;
    line-height: 18px !important;
    background-color: #C6C6C6 !important;
}
::v-deep .van-switch__node{
    height: 16px !important;
    line-height: 16px !important;
    width: 16px !important;
} */
</style>
